/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-11-28 Time: 23:57
 *
 * 工单柱状图
 */

import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';
import {COLOR_THEME, COLOR_WHITE, FONT_COLOR_SUB_TITLE, FONT_SIZE_14} from "../../../../constant/PHColors"
import {SCREEN_WIDTH} from "../../../../constant/PHScreen"

const cellWidth = (SCREEN_WIDTH - 40) / 24;
const arr = [
  0, 0, 0, 0,
  0, 0, 0, 0,
  1, 2, 7, 0,
  0, 0, 0, 0,
  1, 2, 0, 0,
  0, 3, 4, 0
];

const numArr = 9;

export default class WorkOrderHistogramView extends Component {

  render() {
    return (
      <View style={styles.body}>

        {/* 说明提示*/}
        <View style={styles.top}>
          <Text style={styles.topText}>
            高峰时段为10-11点，产生7张工单
          </Text>
        </View>

        {/* 柱状图区 */}
        <View style={styles.center}>
          <View style={styles.centerTop}>
            {
              arr.map((item, index) => {
                return (
                  <View key={index}>
                    <View style={{width: cellWidth, height: 100 - item * 10, justifyContent: 'flex-end', alignItems: 'center'}}>
                      <Text style={{fontSize: 10}}>
                        {index === 10 ? index : ''}
                      </Text>
                    </View>
                    <View style={{backgroundColor: COLOR_THEME, width: cellWidth, height: item * 10, borderColor: COLOR_WHITE, borderWidth: 0.5}} key={index}/>
                  </View>
                )
              })
            }
          </View>
          <View style={styles.centerCenter}/>
          <View style={styles.centerBottom}>
            {
              [...arr, 0].map((item, index) => {
                if (index % 3 !== 0) {
                  return (
                    <View style={styles.bottomCell} key={index}/>
                  )
                } else {
                  return (
                    <View style={styles.bottomCell} key={index}>
                      <Text style={styles.bottomText}>
                        {index}
                      </Text>
                    </View>
                  )
                }
              })
            }
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  body: {
    height: 200
  },
  top: {
    height: 30,
    justifyContent: 'center',
    alignItems: 'flex-start'
  },
  topText: {
    fontSize: FONT_SIZE_14,
    color: FONT_COLOR_SUB_TITLE,
    marginLeft: 15
  },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 20,
    marginRight: 20
  },
  centerTop: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  centerCenter: {
    height: 1,
    width: SCREEN_WIDTH - 30,
    backgroundColor: FONT_COLOR_SUB_TITLE
  },
  centerBottom: {
    width: cellWidth * 25,
    height: cellWidth,
    flexDirection: 'row'
  },
  bottomCell: {
    width: cellWidth,
    height: cellWidth,
    justifyContent: 'center',
    alignItems: 'center'
  },
  bottomText: {
    fontSize: 12
  }
})